/**
 * 外勤签到记录
 * @author levy
 */
import LargeImgLayer from '../components/LargeImg.js';

(function( lf, r) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;

    var Img = RC({
        componentDidMount: function () {
            var node = r.findDOMNode(this.refs.img);
            var imgSrc = node.getAttribute('src');

            node.addEventListener('tap', function (e) {
                var fn = this.props.enlargeImgFn;
                fn && fn(imgSrc);

                lf.utils.stopBubble(e);
            }.bind(this));
        },
        render: function () {
            return(
                <img ref="img" src={this.props.src} />
            );
        }
    });

    var OutsideDetail = RC({
        getInitialState: function () {
            return({
                largeImgSrc:'',
            });
        },
        componentDidMount: function () {
            r.findDOMNode(this.refs.mask).addEventListener('tap', function () {
                //log('mask');
                var handler = this.props.detailHandler;
                handler && handler('none');
            }.bind(this));
        },
        enlargeImgFn: function (imgSrc) {
            this.setState({
                largeImgSrc:imgSrc,
                largeImgVisible:'this',
            });
        },
        hideLargeImgFn: function () {
            this.setState({largeImgVisible:''});
        },
        render: function () {
            var info = this.props.detailInfo;
            //log(info);
            var imgList = info.imgList.map(function(src){
                return <Img src={src} enlargeImgFn={this.enlargeImgFn}/>
            }.bind(this));
            return(
                <div ref="mask" className={info.displayDetail == 'none' ? 'ele-hide' : "mui-backdrop animated fadeIn"}>
                    <div className="outside-detail ">
                        <p className="font44 detail-title">外勤详情</p>
                        <p className="font36 detail-time">{info.time}</p>
                        <span className="font44 location">{info.location}</span>
                        <div className="img-wrapper">
                            {imgList}
                        </div>
                    </div>
                    <LargeImgLayer imgSrc={this.state.largeImgSrc}
                                   visible={this.state.largeImgVisible}
                                    hideHandler={this.hideLargeImgFn}/>
                </div>
            );
        },
    });

    var Record = RC({
        showDetail: function () {
           //var mask = mui.createMask();
           //mask.show();
           var data = this.props.data;
           this.props.detailHandler('',data.location,data.time,data.imgList);
        },
        render: function () {
            var data = this.props.data;

            return (
                <li className="mui-table-view-cell">
                    <a onTouchEnd={this.showDetail}>
                        <span className="font44">{data.location}</span>
                        <span className="font36 time">{data.time}</span>
                    </a>
                </li>
            )
        }
    });

    var Body = RC({
        getInitialState: function () {
            return ({
                mock:[
                    {
                        location:'广东省广州市番禺区青蓝街国家数字家庭示范产业基地',
                        time:'2015-10-10 16:30',
                        imgList:['../public/images/common/camera.png'],
                    },
                    {
                        location:'广东省广州市番禺区青蓝街国家数字家庭示范产业基地',
                        time:'2016-3-7 16:38',
                        imgList:['../public/images/common/camera.png',
                                 '../public/images/common/camera.png',
                                 '../public/images/common/camera.png'
                                ]
                    }
                ],
                recordList:[],
                detailInfo:{//详情要用到
                    displayDetail:'none',
                    location:'',
                    time:'',
                    imgList:[],
                },
            });
        },
        /**
         * @param state : none or '',隐藏或显示
         */
        detailHandler: function (display,location,time,imgList) {
            this.setState({
                //传给OutsideDetail使用
                detailInfo:{
                    displayDetail:display ? display : '',
                    location:location ? location : '',
                    time:time ? time : '',
                    imgList:imgList ? imgList : [],
                }
            });
        },
        componentDidMount: function () {
        },
        componentWillMount: function () {

        },
        render: function () {
            var list = this.state.recordList,
                me = this;
            //mock数据
            if(!list.length){
                list = me.state.mock.map(function(data){
                    return <Record data={data} detailHandler={me.detailHandler}/>
                });
            }

            return (
                <div className="outside-record">
                    <ul className="mui-table-view">
                        {list}
                    </ul>
                    <OutsideDetail detailInfo={this.state.detailInfo}
                                   detailHandler={this.detailHandler} />
                </div>
            )
        }
    });

    r.render(
			<Body />,
			document.getElementById('root')
	)

})( liefeng, React)
